

<template>
  <div class="session-wrapper">
    <own-search>
      <div class="search-wrapper">
        <a-input
          v-model:value="searchForm.keyword"
          placeholder="搜索角色名称|标识"
        />
        <a-select
          v-model:value="searchForm.status"
          allowClear
          placeholder="选择角色状态"
        >
          <a-select-option :value="1">有效</a-select-option>
          <a-select-option :value="0">禁用</a-select-option>
        </a-select>
        <a-button type="primary" @click="reload" :loading="loading">
          查询
        </a-button>
        <a-button type="default" @click="reset" :loading="loading">
          重置
        </a-button>
      </div>
      <template #suffix>
        <a-button
          type="primary"
          ghost
          v-acl="['sys:role:create']"
          @click="create"
          >新增角色</a-button
        >
      </template>
    </own-search>
    <div class="table-wrapper">
      <a-table
        :row-key="(record) => record.id"
        :loading="loading"
        :columns="columns"
        :pagination="pagination"
        :data-source="sourceData"
        @change="handleTableChange"
      >
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.key === 'index'">{{
            (page.pi - 1) * page.ps + index + 1
          }}</template>
          <template v-if="column.key === 'roleName'">
            <!-- <a-tag v-if="record.status" color="success">有效</a-tag>
            <a-tag v-else color="error">禁用</a-tag> -->
            <own-status-tip
              :name="'角色'"
              :status="record.status"
              :text="record.roleName"
            />
          </template>
          <template v-if="column.key === 'createTime'">
            <span>{{
              record.createTime ? format(record.createTime) : ""
            }}</span>
          </template>
          <template v-if="column.key === 'operate'">
            <a-button
              v-acl="['sys:role:edit']"
              type="link"
              size="small"
              @click="edit(record)"
              >编辑</a-button
            >
            <a-divider v-acl="['sys:role:perm']" type="vertical" />
            <a v-acl="['sys:role:perm']" @click="setMenu(record.id)">权限</a>
            <a-divider v-acl="['sys:role:del']" type="vertical" />
            <a-popconfirm
              title="是否删除当前该行数据？"
              ok-text="确定"
              cancel-text="取消"
              @confirm="del(record)"
            >
              <a href="#" v-acl="['sys:role:del']">删除</a>
            </a-popconfirm>
          </template>
        </template>
      </a-table>
    </div>
    <role-menu ref="roleMenuForm"></role-menu>
    <edit ref="editForm" @submit="reload" />
  </div>
</template>

<script lang="ts">
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  ref,
  toRefs,
} from "vue";
import { useRoute, useRouter } from "vue-router";
import systemApis from "@/apis/system";
import { PaginationConfig } from "@/utils/antd-config";
import OwnSearch from "@/components/own-search.vue";
import RoleMenu from "./components/roleMenu.vue";
import OwnStatusTip from "@/components/own-status-tip.vue";
import Edit from "./components/edit.vue";
import { Modal } from "ant-design-vue";
import { dateFormat } from "@/utils/time";
const columns = [
  {
    title: "",
    key: "index",
    align: "center",
  },
  {
    title: "角色名称",
    key: "roleName",
  },
  {
    title: "角色标识",
    dataIndex: "roleKey",
    key: "roleKey",
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    key: "createTime",
  },
  {
    align: "center",
    title: "操作",
    key: "operate",
  },
];
export default defineComponent({
  name: "Role",
  components: {
    OwnSearch,
    RoleMenu,
    OwnStatusTip,
    Edit,
  },
  setup() {
    const route = useRoute();
    const router = useRouter();
    const roleMenuForm = ref(null);
    const editForm = ref(null);
    const state = reactive({
      searchForm: {
        keyword: "",
        status: undefined,
      },
      loading: false as boolean,
      sourceData: [] as Array<any>,
      page: {
        pi: 1,
        ps: 10,
        total: 0,
      },
    });
    //#region 列表查询
    // 查询
    const reload = async () => {
      state.loading = true;
      const res: any = await systemApis.rolePage({
        ...state.searchForm,
        ...state.page,
      });
      state.loading = false;
      if (res.code === 0) {
        state.sourceData = res.data.records;
        state.page.total = res.data.total;
      }
    };
    // 重置
    const reset = () => {
      state.searchForm = {
        keyword: "",
        status: undefined,
      };
      state.page.pi = 1;
      reload();
    };
    const pagination = computed(() => ({
      total: state.page.total,
      current: state.page.pi,
      pageSize: state.page.ps,
      ...PaginationConfig,
    }));
    const format = computed(() => {
      return (date) => {
        return dateFormat(date);
      };
    });
    // table切换页码页数
    const handleTableChange = (
      pagination: { pageSize: number; current: number }
      // filters: any,
      // sorter: any
    ) => {
      state.page.pi = pagination.current;
      state.page.ps = pagination.pageSize;
      reload();
    };

    //#endregion
    const setMenu = (roleId: string | number) => {
      (roleMenuForm as any).value.open(roleId);
    };
    const create = () => {
      (editForm as any).value.open("add");
    };
    const edit = (record) => {
      (editForm as any).value.open("edit", record);
    };
    const del = (record) => {
      Modal.confirm({
        title: "是否删除当前角色?",
        content: "删除后数据无法找回",
        async onOk() {
          const res: any = await systemApis.delRole(record.id);
          if (res.code === 0) {
            reload();
          }
        },
      });
    };
    onMounted(() => {
      reload();
    });
    return {
      columns,
      pagination,
      roleMenuForm,
      ...toRefs(state),
      reload,
      setMenu,
      reset,
      handleTableChange,
      del,
      create,
      edit,
      editForm,
      format
    };
  },
});
</script>

<style scoped>
</style>
